
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./cesium/Cesium1.98/Widgets/widgets.css" />
    <script type="text/javascript" src="./cesium/Cesium1.98/Cesium.js"></script>
</head>

<body style="
      margin: 0;
      overflow: hidden;
      background: #fff;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    ">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

    <script type="text/javascript">
        Cesium.Ion.defaultAccessToken =
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
        const viewer = new Cesium.Viewer("map", {});
        viewer.scene.debugShowFramesPerSecond = true;
        viewer.scene.globe.depthTestAgainstTerrain = true;
        
        function PolylineTrailLinkMaterialProperty(color, duration, d,imgurl) {
            this._definitionChanged = new Cesium.Event();
            this._color = undefined;
            this._color = undefined;
            this.imgurl = imgurl;
            this._colorSubscription = undefined;
            this.color = color;
            this.duration = duration || 3000;
            this._time = (new Date()).getTime();
            this._d = d;
            this.isTranslucent = function () {
                return true;
            }
        }

        Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
            isConstant: {
                get: function () {
                    return false;
                }
            },
            definitionChanged: {
                get: function () {
                    return this._definitionChanged;
                }
            },
            color: Cesium.createPropertyDescriptor('color')
        });

        PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
            return 'PolylineTrailLink';
        }
        
        PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
            if (!Cesium.defined(result)) {
                result = {};
            }
            result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
            // result.image = Cesium.Material.PolylineTrailLinkImage;
            result.image = this.imgurl;
            result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration * this._d;
            return result;
        }
        
        PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
            return this === other ||
                (other instanceof PolylineTrailLinkMaterialProperty &&
                    Property.equals(this._color, other._color))
        }

        Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
        Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
        Cesium.Material.PolylineTrailLinkImage = "";

        Cesium.Material.PolylineTrailLinkSource = `
            czm_material czm_getMaterial(czm_materialInput materialInput)
            {
                czm_material material = czm_getDefaultMaterial(materialInput);
                vec2 st = materialInput.st;
                vec4 colorImage = texture(image, vec2(fract(st.s - time), st.t));
                material.alpha = colorImage.a * color.a;
                material.diffuse = (colorImage.rgb+color.rgb)/2.0;
                return material;
            }
        `;

        Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
            fabric: {
                type: Cesium.Material.PolylineTrailLinkType,
                uniforms: {
                    color: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
                    image: Cesium.Material.PolylineTrailLinkImage,
                    time: -20
                },
                source: Cesium.Material.PolylineTrailLinkSource
            },
            translucent: function (material) {
                return true;
            }
        });

        viewer.entities.add({
            name: 'PolylineTrail',
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
                    -100, 30, 250000,
                    -80, 30, 250000,
                    -80, 31, 250000,
                    -100, 31, 250000,
                ]),
                material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.WHITE, 3000, 1,"./line.png")
            }
        });

        viewer.entities.add({
            name: 'PolylineTrail',
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
                    -100, 40, 250000,
                    -80, 40, 250000,
                    -80, 40.1, 250000,
                    -100, 40.1, 250000,
                ]),
                material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.WHITE, 1000, 1,"./line1.png")
            }
        });


    </script>
</body>

</html>